<template>
    <el-card class="message-board__item" header="管理团队留言" shadow="never">
        <el-table :data="messages|showMessage" :show-header="false" size="mini">
            <el-table-column>
                <template slot-scope="{row}">
                    <span class="nickname__item">{{row.admin.nickname}}</span>
                    <span class="time__item">{{row.created_at | parseTime}}</span>
                    <span class="time__item">(有效期: {{transfromToDay(row.expiration)}} 天)</span>
                    <div>{{row.content}}</div>
                </template>
            </el-table-column>
            <el-table-column width="50" align="center">
                <template slot-scope="{row,$index}">
                    <i
                        @click="deleteBtnClickHandler(row,$index)"
                        class="delete__btn el-icon-delete"
                    />
                </template>
            </el-table-column>
        </el-table>
        <div class="cpform__group">
            <el-input
                class="cpform-input__item"
                placeholder="有什么需要告诉其他管理员的事情"
                size="mini"
                v-model="content"
            />有效期:
            <el-input class="cpform-expiration__item" size="mini" v-model="expirationDay" />天
            <el-button
                @click="submitBtnClickHandler"
                class="cpform-submit-btn__item"
                size="mini"
                type="primary"
            >提交</el-button>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "MessageBoard",
    filters: {
        showMessage(message) {
            return message.filter((v) => !v.isDelete);
        },
    },
    props: {
        value: {
            type: [Array, String, JSON],
            default: "",
        },
    },
    data() {
        return {
            content: "",
            expirationDay: 30,
            messages: [],
        };
    },
    computed: {
        uid() {
            return this.$store.state.user.userInfo.uid;
        },
        nickname() {
            return this.$store.state.user.nickname;
        },
    },
    watch: {
        value(val) {
            try {
                this.messages = JSON.parse(val);
            } catch (error) {
                this.messages = [];
            }
        },
    },
    created() {
        try {
            this.messages = JSON.parse(this.value);
        } catch (error) {
            this.messages = [];
        }
    },
    methods: {
        async deleteBtnClickHandler(row) {
            row.isDelete = true;
            this.$emit("submit", this.messages);
        },
        async submitBtnClickHandler() {
            const {
                content, expirationDay, uid, nickname,
            } = this;
            const expiration = Date.now() + parseInt(expirationDay, 10) * 24 * 60 * 60 * 1000;
            this.messages.unshift({
                id: Date.now(),
                content,
                expiration,
                created_at: new Date(),
                admin: { uid, nickname },
                isDelete: false,
            });
            this.resetForm();
            this.$emit("submit", this.messages);
        },
        resetForm() {
            this.content = "";
            this.expirationDay = 30;
        },
        transfromToDay(timeStamp) {
            const diff = parseInt(timeStamp, 10) - Date.now();
            return Math.ceil(diff / 1000 / 60 / 60 / 24);
        },
    },
};
</script>

<style lang="scss">
.message-board__item {
    .delete__btn {
        font-size: 16px;
        cursor: pointer;
        color: #999;
    }

    .nickname__item {
        font-size: 12px;
        font-weight: bold;
        color: $menuActiveText;
    }

    .time__item {
        margin-left: 6px;
        color: #999;
    }

    .cpform__group {
        margin-top: 20px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 12px;

        &::before {
            content: "留言";
            flex-shrink: 0;
        }

        .cpform-input__item {
            width: 300px;
            margin: 0 20px;
        }

        .cpform-expiration__item {
            width: 50px;
            margin: 0 5px;
        }

        .cpform-submit-btn__item {
            margin-left: 20px;
        }
    }
}
</style>
